{% extends 'base.html' %}
{% block content %}
    <script src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css">
    <style>
        ul{
            list-style: none;
        }
    </style>
    <script>
        $("[data-fancybox]").fancybox({
        });
    </script>
    <body>
        <div class="jumbotron jumbotron-fluid text-center">
            <h1>{{ title }}管理页面</h1>
            <p>共有{{ count }}位同学提交。</p>
        </div>
        <div class="container">
            <div id="accordion">
                {% if Pages==1 %}
                    <div class="card">
                        <div class="card-header">
                            <a class="card-link" data-toggle="collapse" href="#charts">
                                <i class="fas fa-chart-pie fa-fw" aria-hidden="true"></i>&emsp;数据图表：
                            </a>
                        </div>
                        <div id="charts" class="collapse" data-parent="#accordion">
                            <div class="card-body">
                                <div class="col">
                                    <iframe src="/charts?Type=Sex" frameborder="0" width="600" height="300" scrolling="no" style="transform-origin:0 top 0"></iframe>
                                </div>
                                <div class="col">
                                    <iframe src="/charts?Type=Birth_year" frameborder="0" width="600" height="300" scrolling="no" style="transform-origin:0 top 0"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% for tempdata in data %}
                    <div class="card">
                        <div class="card-header">
                            <a class="card-link" data-toggle="collapse" href="#a{{ tempdata['ID'] }}">
                                <i class="fas fa-user" aria-hidden="true"></i>&emsp;{{ tempdata['Name'] }}
                            </a>
                        </div>
                        <div id="a{{ tempdata['ID'] }}" class="collapse" data-parent="#accordion">
                            <div class="card-body">
                                <ul>
                                    <li>
                                        <i class="fas fa-user fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;姓名：{{ tempdata['Name'] }}
                                    </li>
                                    <li>
                                        <i class="fas fa-birthday-cake fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;生日：{{ tempdata['Birthday'] }}
                                    </li>
                                    <li>
                                        <i class="fas fa-home fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;住址：{{ tempdata['Address'] }}
                                    </li>
                                    <li>
                                        <i class="fas fa-mobile fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;手机号：{{ tempdata['Phone'] }}
                                    </li>
                                    <li>
                                        <i class="fab fa-weixin fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;微信号：{{ tempdata['Wechat'] }}
                                    </li>
                                    <li>
                                        <i class="fab fa-qq fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;QQ号：{{ tempdata['QQ'] }}
                                    </li>
                                    <li>
                                        <i class="fas fa-transgender fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;性别：{{ tempdata['Sex'] }}
                                    </li>
                                    <li>
                                        <i class="fas fa-thumbs-up fa-fw" style="font-size:24px"></i>&emsp;心里话：
                                        <p>{{ tempdata['Wish'] }}</p>
                                    </li>
                                    <li>
                                        <i class="fas fa-scroll fa-fw" style="font-size:24px"></i>&emsp;提交时间：{{ tempdata['createdAt'] }}
                                    </li>
                                    {% if "Photo" in tempdata %}
                                        <li>
                                            <i class="fas fa-image fa-fw" aria-hidden="true" style="font-size:24px"></i>&emsp;照片：
                                            <br>
                                            <a data-fancybox="gallery" href="{{ tempdata['Photo']}}"><img src={{ tempdata['Small_photo'] }} width="300"></a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <ul class="pagination text-center justify-content-center">
                {% if Pages==1 %}
                    <li class="page-item disabled"><a class="page-link"><i class="fas fa-angle-left fa-2x fa-fw" aria-hidden="true" style="font-size:16px"></i>上一页</a></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="/admin?Pages={{ Pages-1 }}"><i class="fas fa-angle-left fa-2x fa-fw" aria-hidden="true" style="font-size:16px"></i>上一页</a></li>
                {% endif %}
                {% for temp_page in range(list_page) %}
                    <li class="page-item{% if Pages==temp_page+1 %} active {% endif %}"><a class="page-link" href="/admin?Pages={{ temp_page+1 }}">{{ temp_page+1 }}</a></li>
                {% endfor %}
                {% if Pages>=list_page %}
                    <li class="page-item disabled"><a class="page-link">下一页<i class="fas fa-angle-right fa-2x fa-fw" aria-hidden="true" style="font-size:16px"></i></a></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="/admin?Pages={{ Pages+1 }}">下一页<i class="fas fa-angle-right fa-2x fa-fw" aria-hidden="true" style="font-size:16px"></i></a></li>
                {% endif %}
            </ul>
            <div>
                <a href="/export">
                    <button type="button" class="btn btn-primary">
                        <i class="fas fa-file-excel fa-fw"style="font-size:24px"></i>
                        导出到Excel
                    </button>
                </a>
            </div>
        </div>
    </body>
{% endblock content %}